<template>
  <h2>入库管理--添加入库</h2>
  <div class="parentDiv">
    <div id="form-add">
      <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="onFinish"
        labelAlign="left"
      >
        <a-form-item
          :name="['warehouse', 'commodityName']"
          label="入库商品"
          :rules="[{ required: true }]"
        >
          <a-input v-model:value="formState.warehouse.commodityName" />
        </a-form-item>
        <a-form-item
          :name="['warehouse', 'warehouseNum']"
          label="入库数量"
          :rules="[{ required: true }]"
        >
          <a-input v-model:value="formState.warehouse.warehouseNum" />
        </a-form-item>
        <a-form-item
          :name="['warehouse', 'unit']"
          label="入库单位"
          :rules="[{ required: true }]"
        >
          <a-input v-model:value="formState.warehouse.unit" />
        </a-form-item>

        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
          <a-button type="primary" html-type="submit" @click="AddOneWarehouse()"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive } from "vue";
import { saveNewWarehouse } from "@/api/warehouse";
import { message } from "ant-design-vue";
// import { router } from "../router/index";
export default defineComponent({
  name: "addwarehouse",
  setup() {
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const validateMessages = {
      required: "${label} is required!",
    };
    const formState = reactive({
      warehouse: {
        commodityName: "",
        warehouseNum: "",
        unit: "",
      },
    });

    const onFinish = (values) => {
      console.log("Success:", values);
    };
    const AddOneWarehouse = () => {
      saveNewWarehouse(formState.warehouse).then((resonse) => {
        if (resonse.code == 200) {
          message.success("添加成功", 3);
          formState.warehouse = {
            commodityName: "",
            supplierName: "",
            purchaseNum: "",
          };
        } else {
          message.error("添加失败", 3);
        }
      });
    };

    return {
      formState,
      onFinish,
      AddOneWarehouse,
      layout,
      validateMessages,
    };
  },
});
</script>
<style scoped>
#form-add {
  width: auto;
  height: auto;
  justify-content: center;
  align-items: center;
  display: flex;

  /* border: 1px solid black; */
}
.parentDiv {
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(248, 247, 244);
}
h2 {
  display: block;
  float: left;
}
</style>